<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../../../script/lib/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css.css" />
    <style>
    	.warp{width: 100%;}
        .kind_box{width: 100%;background: #FFFFFF;padding-left: 82px;box-sizing: border-box;}
	    .kind_box .left{width: 82px;background:#F7F7F7;height: 100%;overflow-y: auto;flex-shrink: 0;position: fixed;left: 0;top: 0;bottom: 0;}
	    .kind_box .left::-webkit-scrollbar{display: none;}
	    .kind_box .left span{display: block;height: 50px;width: 100%;background:#F7F7F7;text-align:center;line-height: 50px;color: #666666;position: relative;font-size: 14px;}
	    .kind_box .left .active{background:#FFFFFF;color: #F9891A;}
        .kind_box .left .active::before{display: block;content: "";width: 2px;height: 14px;background: #F9891A;position: absolute;left: 0;top: 50%;margin-top: -7px;}

	    .kind_box .right{width: 100%;height: 100%;overflow-y: auto;background: #f6f6f6;}
	    .kind_box .right::-webkit-scrollbar{display: none;}

        .kind_box .right .goods{width: 100%;margin-bottom: 10px;}
        .kind_box .right .goods:last-child{margin-bottom: 80px;}
        .kind_box .right .goods .sel{width: 46px;background: url(../../../image/main2/sel_icon0.png) no-repeat center;background-size:18px;}
        .kind_box .right .goods .sel.on{background: url(../../../image/main2/sel_icon1.png) no-repeat center;background-size:18px;}
        .kind_box .right .goods .info-box{background: #ffffff;padding:0 15px;box-sizing: border-box;}
        .kind_box .right .goods .info-box .top{padding: 10px 0;}
        .kind_box .right .goods .info-box .top .img-box{width: 70px;height: 70px;}
        .kind_box .right .goods .info-box .top .img-box img{width:100%;height:100%;}

        .kind_box .right .goods .info-box .top .info{padding-left: 10px;}
        .kind_box .right .goods .info-box .top .info .name{font-size: 14px;}
        .kind_box .right .goods .info-box .top .info .guige{font-size: 12px;color: #999999;padding-top: 4px;height: 18px;}
        .kind_box .right .goods .info-box .top .info .other{align-items: center;padding-top: 10px;}
        .kind_box .right .goods .info-box .top .info .other .price{font-size: 16px;color: #FF9502;font-weight: bold;}
        .kind_box .right .goods .info-box .top .info .other .code{font-size: 15px;line-height: 16px;color: #FF9502;font-weight: bold;flex-shrink: 0;}
        .kind_box .right .goods .info-box .top .info .other .code .z{font-size: 13px}
        .kind_box .right .goods .info-box .top .info .other .num{font-size: 12px;color: #999999;text-align: right;}

        .kind_box .right .goods .info-box .bot{}
        .kind_box .right .goods .info-box .bot .sta1{height: 42px;font-size: 12px;align-items: center;justify-content: flex-end;}
        .kind_box .right .goods .info-box .bot .sta1 .btn{align-items: center;justify-content:flex-end;width: 33.3%;}
        .kind_box .right .goods .info-box .bot .sta1 .edit span{background: url(../../../image/main3/addr_icon1.png) no-repeat left center;background-size:14px;padding-left: 20px;}
        .kind_box .right .goods .info-box .bot .sta1 .del span{background: url(../../../image/main3/addr_icon2.png) no-repeat left center;background-size:14px;padding-left: 20px;}
        .kind_box .right .goods .info-box .bot .sta1 .xiajia span{background: url(../../../image/main3/addr_icon3.png) no-repeat left center;background-size:14px;padding-left: 20px;}
        .kind_box .right .goods .info-box .bot .sta1 .shangjia span{background: url(../../../image/main3/addr_icon4.png) no-repeat left center;background-size:14px;padding-left: 20px;}
        .kind_box .right .goods .info-box .bot .sta1 .ge{height: 14px;}

        .kind_box .right .goods .info-box .bot .sta2{height: 42px;font-size: 12px;align-items: center;justify-content: space-between;}
        .kind_box .right .goods .info-box .bot .sta2 .qiang{font-size: 14px;color: #F13A3B;}
        .kind_box .right .goods .info-box .bot .sta2 .del{}
        .kind_box .right .goods .info-box .bot .sta2 .del span{background: url(../../../image/main3/addr_icon2.png) no-repeat left center;background-size:14px;padding-left: 20px;}

        .fixed_btn{position: fixed;bottom: 0;left:82px;height: 60px;background: #f8f8f8;z-index: 999;right: 0;}
        .fixed_btn .btn-box1{width: 100%;height: 100%;padding: 8px 50px;box-sizing: border-box;}
        .fixed_btn .btn-box1 .btn1{background: #FF9502;border-radius: 4px;line-height: 44px;text-align: center;color: #ffffff;font-size: 15px;}

        .fixed_btn .btn-box2{width: 100%;height: 100%;padding: 8px 15px;box-sizing: border-box;line-height: 44px;}
        .fixed_btn .btn-box2 .btn1{border-radius: 4px;text-align: center;font-size: 15px;border: 1px solid #CCCCCC;background: #F8F8F8;margin-right: 12px;}
        .fixed_btn .btn-box2 .btn2{border-radius: 4px;text-align: center;color: #ffffff;font-size: 15px;background: #FF9502;margin-right: 12px;}
        .fixed_btn .btn-box2 .btn3{width: 80px;border-radius: 4px;text-align: center;color: #ffffff;font-size: 15px;background: #FF9502;}

        .fixed_btn .btn-box3{width: 100%;height: 100%;padding: 8px 15px;box-sizing: border-box;line-height: 44px;}
        .fixed_btn .btn-box3 .btn1{border-radius: 4px;text-align: center;font-size: 15px;background: #FF9502;margin-right: 12px;color: #ffffff;}
        .fixed_btn .btn-box3 .btn3{width: 80px;border-radius: 4px;text-align: center;font-size: 15px;background: #FF9502;color: #ffffff;f}

    </style>
</head>

<body>
    <div id="vue" class="warp">

        <div class="kind_box flex border-top">

            <!-- 分类左侧部分 -->
            <div class="left">
                <span class="active" data-id="0" tapmode onclick="tab_type(this);">全部</span>
                <span tapmode onclick="tab_type(this);" v-for="(item,key) in odata" v-text="item.name" :data-id="item.id"></span>
            </div>

            <!-- 商品列表 -->
            <div class="right flex1">
                <div class="goods flex" v-for="(item,key) in Pdata.listData">
                    <div class="sel" :style="{ display:(edit == 1 ? '':'none')}" :data-id="item.id" tapmode onclick="selone(this)"></div>
                    <div class="info-box flex1">
                        <div class="top flex" :data-id="item.id" tapmode onclick="goodshow(this)">
                            <div class="img-box"><img :src="item.image"></div>
                            <div class="info flex1">
                                <div class="name han_1" v-text="item.title"></div>
                                <div class="guige"></div>
                                <div class="other flex">
                                    <div class="price">¥<i v-text="item.price"></i></div>
                                    <div v-if="item.unscore" class="code">+<i v-text="item.unscore"></i><i class="z">积分</i></div>
                                    <div class="num flex1">库存<i v-text="item.ku_num"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="bot">
                            <div class="sta1 flex border-top" :style="{ display:(item.isjia == 1 ? '':'none')}">
                                <div class="btn xiajia flex" v-if="item.isjia == 1" data-type="one" :data-id="item.id" tapmode onclick="goodsJia(this)"><span>强制下架</span></div>
                            </div>
                            <div class="sta2 flex border-top" :style="{ display:(item.forced_down == 1 ? '':'none')}">
                                <div class="qiang">强制下架</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--占位图-->
                <div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
                    <img src="../../../image/no_page/no_shop.png" />
                    <p>暂无商品</p>
                </div>
                <div style="width:100%;height:100px;"></div>
            </div>

            <!--底部按钮-->
            <div class="fixed_btn" :style="{ display:(isjia == 2 ? '':'none')}">
                <div class="btn-box1" :style="{ display:(edit == 0 ? '':'none')}" tapmode onclick="editGood(this)">
                    <div class="btn1">批量管理</div>
                </div>
                <div class="btn-box2 flex" :style="{ display:(edit == 1 ? '':'none')}">
                    <div class="btn2 flex1" v-if="isjia == 2" data-type="more" tapmode onclick="goodsJia(this)">强制下架</div>
                    <div class="btn3" tapmode onclick="quxiao(this)">取消</div>
                </div>
            </div>

        </div>

    </div>

    <script type="text/javascript" src="../../../script/base.min.js" id="loadjs" data-load="L/swiper.min,L/aui-scroll"></script>
    <script type="text/javascript">
    define(function (require, exports, module) {

        var id = 0;
        var isjia = 2;
        var stype = pageParam.type;
        var url = {
            "shop":{
                "list":'company/Goods/index',
                "down":'company/Goods/downForced',
            },
            "jifen":{
                "list":'company/ScoreGoods/index',
                "down":'company/ScoreGoods/downForced',
            },
        }

        //获取商品数据
        getClass = function () {
            lanYun.get('ShopClass/index',function (ret){
                //console.log(JSON.stringify(ret));
                lanYun.vue.odata = ret.data.class;
                _page.getData(2);
            },2)
        }

        _page.getData = function(loading) {
            lanYun.getVueData({url:url[stype].list,get:{page:lanYun.page,cateid:id,isjia:isjia},cache:false,loading:loading},function(ret) {
                console.log(JSON.stringify(ret));
            });
        };

        lanYun.newVue('#vue',{
            ad:{},
            edit:0,
            isjia:2,
            odata:[]
        }, function() {
            getClass();
        });

        //滚动加载..
        new auiScroll({distance:200, listen:true},function(ret) {
            if($(window).scrollTop() < 2) ret.isToBottom = false;
            if(!ret.isToBottom) return;
            _page.getData(2);
        });

        onShow = function () {
            var reshpage = lanYun.getStorage('reshpage');
            if(reshpage){
                lanYun.rmStorage('reshpage');
                intGetData();
            }
        }

		//切换左侧分类
		tab_type = function (tis) {

            if($(tis).hasClass('active')){
                return;
            }
	        var dst = tis.dataset;
	        var index = $(tis).index();
	        $('.left span').removeClass('active');
            $(tis).addClass('active');
            id = dst.id;
            intGetData();

	    }

        //打开商品详情
	    goodshow = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main3/company/goods_show.html', {
	            win:'win',
                title:'商品详情',
	            frameParam : {id:dst.id,type:stype}
	        });
	    }

        // 选择商品
        selone = function (tis){
            var dst = tis.dataset;
            if($(tis).hasClass('on')){
    			$(tis).removeClass('on');
    		}else {
    		    $(tis).addClass('on');
    		}
        }

        // 批量下架商品
        goodsJia = function (tis) {
            var dst = tis.dataset;
            var sids = [];
            if(dst.type == 'more'){
                $(".right .on").each(function() {
                    sids.push(this.dataset.id);
                });
                if(sids.length <= 0){
                    lanYun.toast('请选择强制下架商品');
                    return;
                }
            }else {
                sids.push(dst.id);
            }
            lanYun.dialog.input({fname:'diaLogBox1',title:'请输入下架原因', button:['取消','确定'],value:""},function(ret){
	            if (ret.index == 0) return;
				lanYun.post(url[stype].down,{ids:sids,forced_down_msg:ret.value},function(ret){
                    lanYun.toast(ret.msg);
					if(ret.errcode == 0){
                        intGetData();
					}
				},2)
	        });
        }

        //点击编辑
        editGood = function () {
            lanYun.vue.edit = 1;
        }

        //取消编辑
        quxiao = function () {
            lanYun.vue.edit = 0;
            $(".sel").removeClass('on');
        }

        //头部切换
        tabClick = function (sta) {
            lanYun.vue.edit = 0;
            lanYun.vue.isjia = sta;
            isjia = sta;
            intGetData();
        }

        // 刷新页面
        intGetData = function () {
            lanYun.ajaxPageSta = 0; lanYun.page = 1;
            _page.getData(2);
        }

        topMenuClick = function (){
            lanYun.openWin('main3/company/search_goods.html', {
	            win:'none',
                title:'',
	            frameParam : {type:stype}
	        });
        }

    });
    </script>
</body>
</html>
